<!--
 * @Author: your name
 * @Date: 2022-03-28 11:19:15
 * @LastEditTime: 2022-03-29 00:43:21
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \算法测试\day0906\3.28.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form onsubmit="sb(event)">
        <input type="checkbox" name="all" id="">全选/全不选
        <input type="checkbox" name="hobby" id="" value="吃饭">吃饭
        <input type="checkbox" name="hobby" id="" value="睡觉">睡觉
        <input type="checkbox" name="hobby" id="" value="学习">学习
        <input type="checkbox" name="hobby" id="" value="打豆豆">打豆豆
        <input type="submit" vaule="提交">
    </form>
    <button class="qx">全选</button>
    <button class="fx">反选</button>
    <button class="bx">不选</button>
    <script>
        const qx = document.getElementsByClassName("qx")[0];
        const fx = document.getElementsByClassName("fx")[0];
        const bx = document.getElementsByClassName("bx")[0];
        const all = document.getElementsByName("all")[0];
        let hobby = document.getElementsByName("hobby");
        qx.onclick = function () {
            for (const item of hobby) {
                item.checked = true;
            }
            isChecked();
        }
        fx.onclick = function () {
           // let hobby = document.getElementsByName("hobby");
            for (const item of hobby) {
                item.checked = !item.checked;
            }
            isChecked()
        }
        bx.onclick = function () {
           // let hobby = document.getElementsByName("hobby");
            for (const item of hobby) {
                item.checked = false;
            }
            isChecked()
        }
        function sb(event) {
            event.preventDefault();
            //let hobby = document.getElementsByName("hobby");
            let arr = [];
            for (const item of hobby) {
                if(item.checked) arr.push(item.value)
            }
            console.log(arr);
        }

        all.onclick = function () {
            for (const item of hobby) {
                item.checked = all.checked;
            }
        }

        for (const item of hobby) {
            item.onclick = isChecked;
        }

        function isChecked() {
            for (const item of hobby) {
                if(!item.checked){
                    all.checked = false;
                    return;
                }
            }
            all.checked = true;
        }

        console.log(Object.prototype.__proto__);
    </script>
</body>

</html>